import { graphql } from 'gatsby';

import Callout from '../../components/Callout';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import ToastBasic from '../../examples/Toast/Basic';
import ToastDismissible from '../../examples/Toast/Dismissible';
import ToastStacking from '../../examples/Toast/Stacking';
import ToastPlacement from '../../examples/Toast/Placement';
import ToastPlacementMulti from '../../examples/Toast/PlacementMulti';
import ToastAutohide from '../../examples/Toast/Autohide';

# Toasts

<p className="lead">
  Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
</p>

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

## Examples

### Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

<ReactPlayground codeText={ToastBasic} />

### Dismissible

<ReactPlayground codeText={ToastDismissible} />

### Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

<ReactPlayground codeText={ToastStacking} />

### Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

<ReactPlayground codeText={ToastPlacement} />

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

<ReactPlayground codeText={ToastPlacementMulti} />

### Autohide

A Toast can also automatically hide after X milliseconds. For that, use the `autohide` prop in combination with `delay` the prop to sepecify the delay. But be aware, that it will only trigger the `onClose` function, you have to set manually the show property.

<ReactPlayground codeText={ToastAutohide} />

## API

<ComponentApi metadata={props.data.Toast} />
<ComponentApi metadata={props.data.ToastHeader}/>
<ComponentApi metadata={props.data.ToastBody}/>

export const query = graphql`
  query ToastQuery {
    Toast: componentMetadata(displayName: { eq: "Toast" }) {
      ...ComponentApi_metadata
    }
    ToastHeader: componentMetadata(displayName: { eq: "ToastHeader" }) {
      ...ComponentApi_metadata
    }
    ToastBody: componentMetadata(displayName: { eq: "ToastBody" }) {
      ...ComponentApi_metadata
    }
  }
`;
